<!-- <template>
	<view class="content">
		<view class="uni-flex uni-column">
			<view class="flex-item flex-item-V uni-bg-red">A</view>
			<view class="flex-item flex-item-V uni-bg-green">B</view>
			<view class="flex-item flex-item-V uni-bg-blue">C</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
</style>
 -->

<template>
	<view>
		<view v-if="!refresh">

			<!-- 		<view style="width: auto;"> -->
			<!-- 		<view class="uni-row" style="background-color: #ffffff; width: 100%;">
			<view class="flex-item-input">
				<input class="uni-search" confirm-type="search" placeholder="输入以进行搜索" />
			</view>
			<view class="flex-item-input">
				<icon type="search" size="26"/>
			</view>
		</view> -->
			<u-sticky>
				<view class="uni-flex uni-row" style="background-color: #ffffff; padding: 0rpx 15rpx 0rpx 15rpx;">
					<view style="width: 50rpx; margin-right: 15rpx; margin-left: 15rpx;">
						<icon type="search" size="25" style="padding-top: 35rpx;" />
					</view>
					<view style="-webkit-flex: 1;flex: 1; ">
						<navigator url="search" hover-class="none">
							<input class="uni-search" confirm-type="search" placeholder="输入内容以进行搜索" disabled=true />
						</navigator>
					</view>
				</view>

				<!-- tab -->
				<u-row style="height: 80rpx; width: 100%;">
					<u-col :span="11" style="height: 120%; padding-left: 0rpx; padding-right: 0rpx; background-color: #FFFFFF;">
						<u-tabs bg-color="#ffffff" active-color="#00a0ff" :list="list" :is-scroll="true" :current="current" @change="change"></u-tabs>
					</u-col>
					<u-col :span="1" style="height: 120%; padding-left: 0rpx;padding-right: 0rpx; background-color: #FFFFFF;" @tap="clickTab">
						<view style="height: 100%; width: 100%; background-color: #FFFFFF; padding-left: 20rpx; padding-bottom: 10rpx;">
							<u-icon style="height: 100%;" size="35" name="list" color="#909399"></u-icon>
						</view>
					</u-col>
				</u-row>
			</u-sticky>

			<view style="height: 20rpx; background-color: #F7F7F7;">
			</view>

			<!-- 首页 -->
			<view v-if="current == 0">
				<view>
					<Turns> </Turns>
				</view>



				<view style="background-color: #F7F7F7; padding: 10rpx 15rpx;">
					<!-- 课程推荐 -->
					<view style="margin-top: 30rpx;">
						<CorseRecommend :title="CardTitle" :courseRecommendData="courseRecommendData"></CorseRecommend>
					</view>
					<!-- <view> {{courseRecommendData}}</view> -->
				</view>
			</view>

			<!-- 切换tag -->
			<view v-else>
				<view>
					<u-swiper :effect3d="true" :list="listCourseClassify" :height="320" @click="swiperCourseDetails"></u-swiper>
				</view>

				<!-- 课程小类别遍历 -->
				<view style="background-color: #F7F7F7; padding-top: 20rpx;">
					<view style="background-color: #F7F7F7;" v-for="(obj, i) in courseClassifyData" :key="i">
						<view style="background-color: #F7F7F7; padding: 10rpx 15rpx; margin-top: 10rpx;">

							<u-card title-color="#000000" sub-title-color="#000000" :title="obj.courseSmallClassify" padding="20" margin="0"
							 :title-size="38" :foot-border-top="false">
								<view class="" slot="body">

									<view class="u-body-item u-flex u-border-bottom u-col-between" v-for="(o, index) in obj.etc" :key="index">
										<u-row style="width: 100%; position: relative; font-size: 30rpx; margin-top: 20rpx; margin-bottom: 20rpx;"
										 @tap="courseDetails(o.id)">

											<u-col :span="6" @tap="courseDetails(o.id)">
												<u-image border-radius="10" width="300rpx" height="200rpx" :src="url + 'courseImages/' + o.courseImage"></u-image>
											</u-col>

											<u-col :span="6" @tap="courseDetails(o.id)">
												<view style="position: absolute; top: 0rpx; color: #000000;">{{o.courseName}}</view>
												<view style="position: absolute; top: 80rpx; color: #bfc4cb; font-size: 25rpx;">{{o.schoolName}}</view>
												<view style="position: absolute; bottom: 10rpx; color: #bfc4cb; font-size: 25rpx;">
													<u-icon name="account"></u-icon>
													<text>教师： {{o.courseTeacher}}</text>
												</view>
											</u-col>
										</u-row>
									</view>
								</view>
								<view slot="foot" style="padding-top: 0rpx;">
									<u-row @tap="allCourseClassify(obj.id)">
										<u-col :span="5" :offset="5" @tap="allCourseClassify(obj.id)">
											查看全部
											<u-icon name="arrow-right"></u-icon>
										</u-col>
									</u-row>
								</view>
							</u-card>

						</view>
					</view>
				</view>

			</view>

			<u-divider style="background-color: #F7F7F7;">我是有底线的</u-divider>

		</view>
	</view>
</template>

<script>
	import Turns from './components/turning_img.vue';
	import CorseRecommend from './components/homeCourseRecommend.vue';
	import {
		getTest
	} from "@/api/modules/test.js";
	import {
		getCourseRecommandUniapp,
		getNewestCourse,
		getCourseSmallClassify
	} from "@/api/modules/home.js"

	export default {
		components: {
			Turns,
			CorseRecommend
		},
		data() {
			return {
				url: this.GOBAL.baseURL,
				refresh: false,
				courseRecommendData: [],
				CardTitle: "为你推荐",

				courseClassifyData: [], // 课程小分类的数据

				list: [{
					name: '首页',
					id: '首页'
				}],
				current: 0,

				listCourseClassify: [], // 课程分类下的轮播图

			}
		},
		onPullDownRefresh() {
			let that = this;

			that.refresh = true;

			that.getRecomand();
			that.change(that.current);

			that.$nextTick(function() {
				that.refresh = false;
				that.courseRecommendData = []
				uni.stopPullDownRefresh();
			})
		},
		methods: {
			// 查看课程分类下的所有课程
			allCourseClassify(params) {
				uni.navigateTo({
					url: './searchCourseClassify?courseClassifyID=' + params
				});
			},
			// 点击某个详细的课程
			courseDetails(params) {
				// console.log(params)

				// uni.navigateTo({
				// 	url: '../course/courseDetails?courseID=' + params
				// });
				uni.navigateTo({
					url: '../joinCourse/joinCourse?courseID=' + params
				});
			},
			// 点击轮播图的课程
			swiperCourseDetails(index) {
				let that = this;
				// uni.navigateTo({
				// 	url: '../course/courseDetails?courseID=' + that.listCourseClassify[index].id
				// });
				uni.navigateTo({
					url: '../joinCourse/joinCourse?courseID=' + that.listCourseClassify[index].id
				});
			},
			clickTab() { // 点击右侧的list
				uni.navigateTo({
					url: 'tab',
				});
			},
			change(index) { // 点击tab
				let that = this;
				that.current = index;

				if (index != 0) {
					let data = {
						courseClassifyID: that.list[that.current].id
					}
					getNewestCourse(data)
						.then((resp) => {
							that.listCourseClassify = []
							for (let i = 0; i < resp.data.length; i++) {
								let swiper = {
									image: that.url + 'courseImages/' + resp.data[i].courseImage,
									id: resp.data[i].id
								}
								that.listCourseClassify.push(swiper)
							}
							// console.log(that.listCourseClassify)
						})
						.catch((resp) => {})
					getCourseSmallClassify(data)
						.then((resp) => {
							that.courseClassifyData = resp.data
						})
						.catch((resp) => {})
				}
			},
			getRecomand() {
				// 获取课程推荐
				const _this = this
				// console.log(uni.getStorageSync("userEmail"))
				let data = {
					userEmail: uni.getStorageSync("userEmail")
				}
				getCourseRecommandUniapp(data)
					.then(resp => {
						for (let i = 0; i < 5; i++) {
							resp.data.records[i].courseImage = this.GOBAL.baseURL + 'courseImages/' + resp.data.records[i].courseImage;
							// console.log(resp.data.records[i])
							this.courseRecommendData.push(resp.data.records[i])
						}
					})
					.catch(resp => {
						console.log(resp)
					})

			}
		},
		onShow() {
			// h5 在这会报错
			let that = this;
			if (uni.getStorageSync("userChooseClassify") == '') {
				setTimeout(() => {
					that.list = uni.getStorageSync("userChooseClassify");
				}, 1000)
			}

			that.list = uni.getStorageSync("userChooseClassify");
		},
		onLoad() {
			let that = this;
			//获得推荐课程的数据 放在courseRecommendData
			this.getRecomand()
		}
	}
</script>

<style>
	.uni-flex {
		display: flex;
		flex-direction: row;
	}

	.uni-row {
		flex-direction: row;
	}

	/* 	.text {
		margin: 15rpx 10rpx;
		padding: 0 20rpx;
		background-color: #ebebeb;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		color: #777;
		font-size: 26rpx;
	} */

	/* 	.flex-item-input{
		width: 33.3%;
		height: 200rpx;
		text-align: center;
		line-height: 200rpx;
	} */

	/* 	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	} */

	.uni-search {
		width: 580rpx;
		height: 50rpx;
		padding: 15rpx 25rpx;
		line-height: 50rpx;
		font-size: 28rpx;
		background: #F7F7F7;
		flex: 1;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		border-radius: 6em 6em 6em 6em;
		text-align: center;
	}

	input::-ms-input-placeholder {
		text-align: center;
	}

	input::-webkit-input-placeholder {
		text-align: center;
	}

	.sticky {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 999;
	}
</style>
